<template>
  <!-- 当数据为空需要占位时，会显示 cellEmptyContent -->
  <div class="min-h serveProject bg-wt">
    <SearchForm
      :searchData="pagination"
      @handleClear="handleClear"
      @handleReset="handleReset"
      @handleSearch="handleSearch"
    ></SearchForm>
    <TableList
      :data="data"
      :total="total"
      :pagination="pagination"
      @onPageChange="onPageChange"
      @handleBulid="handleBulid"
      @handleEdit="handleEdit"
    >
    </TableList>
    <DialogForm
      ref="formRef"
      :visible="visible"
      :title="title"
      :data="formBaseData"
      @handleClose="handleClose"
      @handleAdd="handleAdd"
      @handleEdit="saveHandleEdit"
    ></DialogForm>
  </div>
</template>

<script setup lang="jsx">
import { ref, onMounted } from 'vue'
import TableList from './components/TableList.vue'
import SearchForm from './components/SearchForm.vue'
import DialogForm from './components/DialogForm.vue'
import { MessagePlugin } from 'tdesign-vue-next'
import {
  getProjectDetails,
  getProjectList,
  projectAdd,
  projectUpdate
} from '@/api/serve'

const data = ref([])
const total = ref(0)
const formBaseData = ref({}) // 弹窗表单内容

const onPageChange = (pageInfo) => {
  console.log(pageInfo)
  pagination.value.pageNum = pageInfo.current
  pagination.value.pageSize = pageInfo.pageSize
  getList()
}

const pagination = ref({
  pageSize: 5,
  pageNum: 1
})

const getList = async () => {
  const result = await getProjectList(pagination.value)
  if (result.code == 200) {
    data.value = result.data.records
    total.value = result.data.total
  }
}
//重置搜索框
const handleReset = () => {
  //重置页码
  pagination.value = {
    pageSize: 10,
    pageNum: 1
  }
  //重新查询列表
  getList()
}
//搜索
const handleSearch = () => {
  getList()
}
//清空
const handleClear = (val) => {
  if (val === 'name') {
    delete pagination.value.name
  } else {
    delete pagination.value.status
  }
  getList()
}

//新增对话框操作逻辑
const visible = ref(false) //是否显示对话框
const title = ref('') //表单标题
//新增按钮
const handleBulid = () => {
  title.value = '新增'
  visible.value = true
}
//关闭新增和修改的对话框
const handleClose = () => {
  visible.value = false // 关闭新增弹窗
}
//新增护理项目点击事件
const formRef = ref()
const handleAdd = async (formData) => {
  const result = await projectAdd(formData)
  if (result.code == 200) {
    MessagePlugin.success('新增成功')
    visible.value = false
    getList()
    formRef.value.handleClear()
  } else {
    MessagePlugin.error(result.msg)
  }
}
//修改点击事件
const handleEdit = async (id) => {
  const result = await getProjectDetails(id)
  if (result.code == 200) {
    title.value = '修改'
    visible.value = true
    formBaseData.value = result.data
  } else {
    MessagePlugin.error(result.msg)
  }
}
//修改保存护理项目点击事件
const saveHandleEdit = async (formData) => {
  const result = await projectUpdate(formData)
  if (result.code == 200) {
    MessagePlugin.success('修改成功')
    visible.value = false
    formRef.value.handleClear()
    getList()
  } else {
    MessagePlugin.error(result.msg)
  }
}

onMounted(() => {
  getList()
})
</script>
